//  搜索引擎JS
const inp = document.querySelector('input')
const list = document.querySelector('#list')
//  绑定 input 事件
inp.oninput = function () {
  //  拿到输入的文本内容
  const text = this.value.trim()
  //  发送请求请求数据了  动态创建一个 script 标签
  const script = document.createElement('script')
  // 给 script 标签设置 src 属性
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`
  // 把 script 标签插入到 body 里面
  document.body.appendChild(script)
  script.remove()
}
// 把返回的函数定义在全局
function fn(res) {
  if (!res.g) {
    // 说明没有 g 这个数组
    ul.classList.remove('active')
    return
  }
  // 代码执行到这里, 说明有内容需要渲染
  let str = ''
  res.g.forEach(item => {
    str += `<li>${ item.q }</li>`
  })
  // 插入到 ul 内部
  list.innerHTML = str
  // 让 ul 显示
  list.classList.add('active')
}



//  更多商品
// 请求数据 渲染页面

var floorUl = document.querySelector('.floorUl')
var loadingBox = document.querySelector('.loading')

// 准备变量
var page=0
var size=20
var total = Math.ceil(list.length / size)

//  准备一个开关
var flag = true
// 获取数据
var info={
 callback:'fn',
 q:'*',
 cate:102228,
 page:0,
//  size=20,
 _: new Date().getTime()
}

// 根据 info 的所有内容, 去获取本页的列表数据
getList()
function getList(){
 // 2-1. 把 info 变成 查询字符串 格式
 var data =queryStringify(info)

 const script = document.createElement('script')

 script.src = `https://search.mall.360.cn/search/q?` + data

 document.body.appendChild(script)

 script.remove()
}

function fn(res){
 console.log(res)
 var str = ''
 res.data.list.forEach(function (item) {
   str += `
   <li>
   <img src = ${item.img}>
   <div>${item.title}</div>
   <p>¥${item.price}</p>
   </li>
   `
 })
 floorUl.innerHTML += str

}

//  浏览器滚动事件
window.addEventListener('scroll', () => {
 var scroll_top = document.documentElement.scrollTop || document.body.scrollTop
 var window_height = document.documentElement.clientHeight
 var ul_height = floorUl.offsetHeight
 var ul_top = floorUl.offsetTop
 // 4-3. 判断是否加载下一页
 if (scroll_top + window_height <= ul_height + ul_top) return
   // 判断开关
   if (!flag) return
   // 顺手把开关关上
   flag = false
   // 加载下一页
   // 让 loading 效果出现
   loadingBox.classList.add('active')
   // 延迟 1s 加载下一页, 模拟网络加载环境
   setTimeout(function () {
     console.log('加载一页')
     // 4-4. 加载下一页
     info.page++
     getList()
     // 关闭 loading 效果
     loadingBox.classList.remove('active')
     // 可以继续加载下一页了
     flag = true
   }, 1000)
 
})
